<template>
  <Layout>
    <Header @toggleMenu="showMenu=!showMenu" />
    <Layout class="main">
      <Sider :class="['docs-k-layout-sider',{'slider-show':showMenu}]">
        <div class="ms" v-if="!showNav">
          <div v-for="(item, i) in menus" :key="i" @click="() => change(i, item)" :class="[
              'item',
              {
                'item-prev': currentIndex > i,
                'item-acitve': currentIndex - 1 == i,
              },
            ]">
            <span class="num">{{ i + 1 }}</span>
            <span class="text">{{ item.title }}</span>
          </div>
        </div>
        <div class="nav-table" ref="nav" v-show="showNav"></div>
        <div class="copyright">
          <a href="https://k-ui.cn" target="_blank">powered by kui</a>
          <Icon type="list" class="icon" @click="showNav = !showNav" />
        </div>
      </Sider>
      <Content class="right typo">
        <transition :name="type" mode="out-in">
          <router-view></router-view>
        </transition>
        <div class="controls">
          <div class="fabs">
            <Button class="back" @click="swiper('right')" v-show="currentIndex > 1">返回</Button>
            <div class="spacer" />
            <Button type="primary" class="next" @click="swiper('left')" v-show="currentIndex < menus.length">下一步</Button>
          </div>
        </div>
      </Content>
    </Layout>
  </Layout>
</template>

<script>
import Header from "./components/header";
export default {
  components: {
    Header,
  },
  data() {
    return {
      showNav: false,
      showMenu: false,
      currentIndex: 1,
      type: "right",
      menus: [
        { title: "课程概述", route: "overview" },
        { title: "课前准备", route: "post-prepare" },
        { title: "容器集群", route: "tke-cluster" },
        { title: "镜像仓库", route: "tcr" },
        { title: "本地运行", route: "local-run" },
        { title: "容器化改造", route: "docker-run" },
        { title: "K8S 应用部署", route: "k8s-run" },
        { title: "日志收集", route: "log" },
        { title: "监控与告警", route: "monitor" },
        { title: "云原生监控", route: "prometheus" },
        { title: "审计/事件/健康检查", route: "audit" },
        { title: "弹性伸缩", route: "hpa" },
        { title: "服务网格", route: "mesh" },
        { title: "多集群容灾", route: "mesh-multi-cluster" },
        { title: "Devops", route: "devops" },
      ],
    };
  },
  methods: {

    change(i, { route }) {
      this.type = i >= this.currentIndex ? "left" : "right";
      this.currentIndex = i + 1;
      this.$router.push(`/${route}`);
      this.renderNav()
    },
    swiper(type) {
      this.type = type;
      type == "right" ? this.currentIndex-- : this.currentIndex++;
      let { route } = this.menus[this.currentIndex - 1];
      this.$router.push(`/${route}`);
      this.renderNav()
    },
    scroll(e) {
      let au = document.querySelectorAll(".anchor");
      au.forEach((x) => {
        let top = x.getBoundingClientRect().top;
        if (top <= 70) {
          let href = x.getAttribute("href");
          let box = document.querySelector(".table-of-contents");
          box
            .querySelectorAll("li")
            .forEach((y) => y.setAttribute("class", ""));
          box
            .querySelector(`a[href="${href}"]`)
            .parentNode.setAttribute("class", "link-actived");
        }
      });
    },
    renderNav() {
      this.showMenu = false
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        let nav = this.$refs.nav;
        nav.innerHTML = "";
        let navDom = document.querySelector(".table-of-contents");
        if (!navDom) return
        nav.appendChild(navDom);
        navDom.style.display = 'block';
        this.bindImageView()

      }, 500)
    },
    bindImageView() {
      let wrapper = document.querySelector('.wrapper')
      wrapper.addEventListener('scroll', this.scroll)
      let img = wrapper.querySelectorAll('img')
      let data = []
      img.forEach(m => data.push(m.getAttribute('src')))

      img.forEach((m, index) => {
        m.addEventListener('click', () => {
          this.$Image.show({ index, data })
        })
      })
    }
  },
  mounted() {
    this.renderNav();
    document.querySelector('.right').addEventListener('touchstart', () => this.showMenu = false)
    //滚动到锚点
    let hash = decodeURIComponent(this.$route.hash || '')
    if (hash) {
      let anchor = this.$el.querySelector(hash)
      let wrapper = document.querySelector('.wrapper')
      anchor && (wrapper.scrollTop = anchor.offsetTop)
    }
  },
  beforeMount() {
    let route = this.$route.path.substring(1);
    let index = this.menus.map((x) => x.route).indexOf(route);
    this.currentIndex = index + 1;
  },
};
</script>
